<template>
	<div class="songsheet">
		<div class="songsheet-main-top">
			<div class="songsheet-main-left">
				<img :src="playlist.coverImgUrl" />
			</div>
			<div class="songsheet-main-right">
				<h1><label>歌单</label>{{playlist.name}}</h1>
				<p> <span><img :src="playlist.creator.avatarUrl" /></span> <span>{{playlist.creator.nickname}}</span> <span>{{ playlist.createTime | fmtTime}}创建</span></p>
				<p> <span>标签：</span> <span>{{playlist.tags | ArrtoString}}</span> </p>
				<p> <span>歌曲：</span> <span>{{playlist.subscribers.length}}</span> <span>播放：</span> <span>{{playlist.playCount | playCountw}}</span>
				</p>
				<p> <span>简介：</span></p><Input style="z-index: 10;" readonly v-model="playlist.description" type="textarea" :rows="4" />
			</div>
		</div>
		<div class="songsheet-main">
			<div class="songsheet-main-tab">
				<Tabs value="name1">
					<TabPane label="歌曲列表" name="name1">
						<tablefz @clicktr="clicktr" :tablelist='subscribers'></tablefz>
					</TabPane>
					<TabPane label="评论(999)" name="name2">评论(999)</TabPane>
					<TabPane label="收藏者" name="name3">收藏者</TabPane>
				</Tabs>
				<div class="inputdev">
					<div class="input">
						<input type="text" placeholder="搜索歌单音乐" />
						<i class="iconfont icon-sousuo"></i>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from "vuex"
	import dayjs from 'dayjs';
	import tablefz from '@/components/Table/tablefz.vue'
	export default {
		data() {
			return {
				subscribers: [],
				playlist: {},
			}
		},
		components: {
			tablefz
		},
		methods: {
			clicktr(data) { //点击当前歌曲
				let id = data.id;
				console.log(id)
				this.$api.song_url({
					id: id
				}).then(res => {
					let obj = {
						img:data.al.picUrl,
						name:data.name,
						gs:data.ar[0].name,
						zsc:data.dt,
						url:res.data[0].url
					}
					this.$store.commit('SongSET', obj);
				})
			},
			songDetail() { //根据id获取歌曲详情
				let ids = '';
				for (let i = 0; i < this.playlist.trackIds.length; i++) {
					if (i) {
						ids += ',' + this.playlist.trackIds[i].id;
					} else {
						ids += this.playlist.trackIds[i].id;
					}

				}
				this.$api.song_detail({
					ids: ids
				}).then(res => {
					this.subscribers = res.songs;
					console.log(res)
				})
			}
		},
		activated() {
			this.playlist = this.$route.query.data.playlist;
			this.songDetail();
		},
		// created() {
		// 	this.playlist = this.$route.query.data.playlist;
		// 	console.log(this.playlist)
		// },
		// mounted() {
		// 	this.songDetail();
		// },
		filters: {
			playCountw(e) {
				return Math.ceil(e / 10000) + '万';
			},
			ArrtoString(e) {
				if (e) {
					return e.join(' / ');
				}

			},
			//时间戳转日期过滤器
			fmtTime(date) {
				if (date) {
					return dayjs(date).format('YYYY-MM-DD');
				} else {
					return ''
				}
			},
		}
	}
</script>

<style scoped="scoped">
	.songsheet {
		width: 100%;
		padding: 30px;
	}

	.songsheet-main-top {
		display: flex;
		width: 100%;
		margin-bottom: 20px;
	}

	.songsheet-main-left {
		width: 300px;
	}

	.songsheet-main-left img {
		width: 200px;
		height: 200px;
		border-radius: 5px;
	}

	.songsheet-main-right {
		margin-left: 15px;
		width: 100%;
		height: 100%;
	}

	.songsheet-main-right h1 {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.songsheet-main-right label {
		border: 1px solid red;
		border-radius: 5px;
		margin-right: 5px;
		font-size: 14px;
		padding: 5px 10px;
	}

	.songsheet-main-right p {
		width: 100%;
		margin: 5px 0;
		display: flex;
		align-items: center;
	}

	.songsheet-main-right p span {
		margin: 0 5px;
		min-width: 45px;
		display: flex;
		flex-wrap: wrap;
		min-height: 21px;
	}

	.songsheet-main-right p div {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.songsheet-main-right p span img {
		width: 30px;
		height: 30px;
		border-radius: 50%;
	}

	.songsheet-main {
		position: relative;
		width: 100%;
	}

	.songsheet-main-tab .inputdev {
		position: absolute;
		top: 5px;
		right: 0px;
	}

	.songsheet-main-tab .inputdev input {
		width: 100%;
		border-radius: 20px;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		outline: none;
		padding: 2px 8px;
		font-size: 13px;
		border: none;
		background-color: #D9D9D9;
	}

	.songsheet-main-tab .inputdev .input {
		position: relative;
		height: 30px;
		width: 220px;
	}

	.songsheet-main-tab .inputdev .input i {
		position: absolute;
		right: 8px;
		top: 0px;
	}
</style>
